<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover,maximum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- m-header start -->
    <header class="m-header">
        <a href="#" class="logo"><img src="./images/logo-3@2x.png" alt=""></a>
        <a href="#" class="search"><img src="./images/search-@2x.png" alt=""></a>
        <a href="#" class="login"><img src="./images/login-@2x.png" alt=""></a>
        <a href="#" class="download">下载 APP</a>
    </header>
    <!-- m-header end -->
    <!-- m-nav start -->
    <nav class="m-nav">
        <div class="swiper-container" id="swiper-nav">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="#" class="active">首页</a></div>
                <div class="swiper-slide"><a href="#">动画</a></div>
                <div class="swiper-slide"><a href="#">番剧</a></div>
                <div class="swiper-slide"><a href="#">国创</a></div>
                <div class="swiper-slide"><a href="#">音乐</a></div>
                <div class="swiper-slide"><a href="#">舞蹈</a></div>
                <div class="swiper-slide"><a href="#">电视剧</a></div>
                <div class="swiper-slide"><a href="#">影视</a></div>
                <div class="swiper-slide"><a href="#">纪录片</a></div>
                <div class="swiper-slide"><a href="#">游戏</a></div>
                <div class="swiper-slide"><a href="#">知识</a></div>
                <div class="swiper-slide"><a href="#">美食</a></div>
                <div class="swiper-slide"><a href="#">科技</a></div>
                <div class="swiper-slide"><a href="#">娱乐</a></div>
                <div class="swiper-slide"><a href="#">直播</a></div>
                <div class="swiper-slide"><a href="#">专栏</a></div>
                <div class="swiper-slide"><a href="#">资讯</a></div>
                <div class="swiper-slide"><a href="#">活动</a></div>
                <div class="swiper-slide"><a href="#">课堂</a></div>
            </div>
        </div>
    </nav>
    <!-- m-nav end -->
    <!-- m-main start -->
    <main class="m-main">
        <!-- m-banner start -->
        <section class="m-banner">
            <div class="swiper-container" id="swiper-banner">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./images/banner-1@2x.png" alt=""></div>
                    <div class="swiper-slide"><img src="./images/banner-2@2x.png" alt=""></div>
                    <div class="swiper-slide"><img src="./images/banner-3@2x.png" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </section>
        <!-- m-banner end -->
        <!-- m-menu start -->
        <nav class="m-menu">
            <ul>
                <li>
                    <a href="#">
                        <img src="./images/banner1-@2x.png" alt="">
                        <p>番剧</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner2-@2x.png" alt="">
                        <p>游戏</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner3-@2x.png" alt="">
                        <p>新剧</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner4-@2x.png" alt="">
                        <p>生活</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner5-@2x.png" alt="">
                        <p>健康</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner6-@2x.png" alt="">
                        <p>喜剧</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner7-@2x.png" alt="">
                        <p>美食</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner8-@2x.png" alt="">
                        <p>科技</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner9-@2x.png" alt="">
                        <p>生活</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./images/banner10-@2x.png" alt="">
                        <p>体育</p>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- m-menu end -->
        <!-- m-recommend start -->
        <section class="m-recommend">
                <ul class="m-recommend-tab">
                    <li class="active">热门排行</li>
                    <li>最新热播</li>
                    <li>综合推荐</li>
                </ul>
                <div class="m-recommend-content">
                    <div class="m-recommend-list" style="display: block;">
                        <div class="swiper-container" id="swiper-recommend1">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic2.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">【人类高质量CG】咏春宁次： 笼中鸟心中拳</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>190.4万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>6160</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic3.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">时代少年团</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic4.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic5.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="m-recommend-list">
                        <div class="swiper-container" id="swiper-recommend2">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic3.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic2.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic5.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic6.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic3.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">时代少年团</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="m-recommend-list">
                        <div class="swiper-container" id="swiper-recommend3">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic1.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic2.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic4.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic3.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic3.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">时代少年团</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                                <div class="swiper-slide">
                                    <!-- common start -->
                                    <div class="common-list">
                                        <a href="#">
                                            <img src="./images/pic5.png" alt="">
                                            <div class="mask">
                                                <div class="common-list-play">
                                                    <span class="list-play"></span>
                                                    <i>70.8万</i>
                                                </div>
                                                <div class="common-list-info">
                                                    <span class="list-info"></span>
                                                    <i>11.5万</i>
                                                </div>
                                            </div>
                                        </a>
                                        <p class="common-list-title">
                                            <a href="#">透明手表。下集预告</a>
                                        </p>
                                    </div>
                                    <!-- common end -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>
        <!-- m-recommend end -->
        <!-- m-hot start -->
        <section class="m-hot">
            <ul>
                <li>
                    <a href="#">
                        <div class="m-hot-img"><img src="./images/hot1.png" alt=""></div>
                        <div class="m-hot-text">
                            <div class="m-hot-title">自制战斗机式的打水仗摩托车</div>
                            <div class="m-hot-desc">跟小朋友打水仗输了做了个战斗机准备一雪前耻</div>
                        </div>
                        <div class="icon-play">
                            <img src="./images/play.png" alt="">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="m-hot-img"><img src="./images/hot2.png" alt=""></div>
                        <div class="m-hot-text">
                            <div class="m-hot-title">原 神 之 友 （第九期）</div>
                            <div class="m-hot-desc">所有原神玩家都可以参加！期还会额外有一个满级玩家</div>
                        </div>
                        <div class="icon-play">
                            <img src="./images/play.png" alt="">
                        </div>
                    </a>
                </li>
            </ul>
        </section>
        <!-- m-hot end -->
        <!-- m-foucus start -->
        <section class="m-foucus">
            <div class="m-foucus-title">
                <span>最近在看</span>
                <a href="#">查看全部<img src="./images/youjiantou@2x.png" alt=""></a>
            </div>
            <div class="m-foucus-content">
                <div class="swiper-container" id="swiper-foucus">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="m-foucus-img"><img src="./images/foucus1.png" alt=""></div>
                                <p>番外 动态漫</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="m-foucus-img"><img src="./images/foucus2.png" alt=""></div>
                                <p>这才是顶级的 气场</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="m-foucus-img"><img src="./images/foucus3.png" alt=""></div>
                                <p>带着 梦想再次的飞起</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="m-foucus-img"><img src="./images/foucus1.png" alt=""></div>
                                <p>这才是顶级的 气场</p>
                            </a>
                        </div>
                        <div class="swiper-slide">
                            <a href="#">
                                <div class="m-foucus-img"><img src="./images/foucus2.png" alt=""></div>
                                <p>带着梦想再次的飞起</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- m-foucus end -->
        <!-- m-view-list start -->
        <section class="m-view-list">
            <ul>
                <li>
                    <!-- common start -->
                    <div class="common-list">
                        <a href="#">
                            <img src="./images/pic3.png" alt="">
                            <div class="mask">
                                <div class="common-list-play">
                                    <span class="list-play"></span>
                                    <i>70.8万</i>
                                </div>
                                <div class="common-list-info">
                                    <span class="list-info"></span>
                                    <i>11.5万</i>
                                </div>
                            </div>
                        </a>
                        <p class="common-list-title">
                            <a href="#">【时代少年团】《时代夏令营》 03：水上的卧龙凤雏们</a>
                        </p>
                    </div>
                    <!-- common end -->
                </li>
                <li>
                    <!-- common start -->
                    <div class="common-list">
                        <a href="#">
                            <img src="./images/pic4.png" alt="">
                            <div class="mask">
                                <div class="common-list-play">
                                    <span class="list-play"></span>
                                    <i>190.4万</i>
                                </div>
                                <div class="common-list-info">
                                    <span class="list-info"></span>
                                    <i>6160</i>
                                </div>
                            </div>
                        </a>
                        <p class="common-list-title">
                            <a href="#">这真的是碳基生物能吃的玩意 吗？？？</a>
                        </p>
                    </div>
                    <!-- common end -->
                </li>
                <li>
                    <!-- common start -->
                    <div class="common-list">
                        <a href="#">
                            <img src="./images/pic4.png" alt="">
                            <div class="mask">
                                <div class="common-list-play">
                                    <span class="list-play"></span>
                                    <i>190.4万</i>
                                </div>
                                <div class="common-list-info">
                                    <span class="list-info"></span>
                                    <i>6160</i>
                                </div>
                            </div>
                        </a>
                        <p class="common-list-title">
                            <a href="#">约 尔 蹦 迪 2.0，跳 极 乐 净 土！【咬人猫】</a>
                        </p>
                    </div>
                    <!-- common end -->
                </li>
                <li>
                    <!-- common start -->
                    <div class="common-list">
                        <a href="#">
                            <img src="./images/pic6.png" alt="">
                            <div class="mask">
                                <div class="common-list-play">
                                    <span class="list-play"></span>
                                    <i>190.4万</i>
                                </div>
                                <div class="common-list-info">
                                    <span class="list-info"></span>
                                    <i>6160</i>
                                </div>
                            </div>
                        </a>
                        <p class="common-list-title">
                            <a href="#">爽！边迷路边吃超辣美食的感觉，只能在9D重庆体验到！</a>
                        </p>
                    </div>
                    <!-- common end -->
                </li>
                <li>
                    <!-- common start -->
                    <div class="common-list">
                        <a href="#">
                            <img src="./images/pic2.png" alt="">
                            <div class="mask">
                                <div class="common-list-play">
                                    <span class="list-play"></span>
                                    <i>190.4万</i>
                                </div>
                                <div class="common-list-info">
                                    <span class="list-info"></span>
                                    <i>6160</i>
                                </div>
                            </div>
                        </a>
                        <p class="common-list-title">
                            <a href="#">这真的是碳基生物能吃的玩意 吗？？？</a>
                        </p>
                    </div>
                    <!-- common end -->
                </li>
                <li>
                    <!-- common start -->
                    <div class="common-list">
                        <a href="#">
                            <img src="./images/pic1.png" alt="">
                            <div class="mask">
                                <div class="common-list-play">
                                    <span class="list-play"></span>
                                    <i>190.4万</i>
                                </div>
                                <div class="common-list-info">
                                    <span class="list-info"></span>
                                    <i>6160</i>
                                </div>
                            </div>
                        </a>
                        <p class="common-list-title">
                            <a href="#">这真的是碳基生物能吃的玩意 吗？？？</a>
                        </p>
                    </div>
                    <!-- common end -->
                </li>
            </ul>
        </section>
        <!-- m-view-list end -->
    </main>
    <!-- m-main end -->
    <!-- tabbar start -->
    <footer class="tabbar">
        <ul>
            <li>
                <a href="#">
                    <img src="./images/home.png" alt="">
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/dongtai.png" alt="">
                    <p>动态</p>
                </a>
            </li>
            
            <li class="share"><a href="#"></a></li>
            
            <li>
                <a href="#">
                    <img src="./images/gouwudai.png" alt="">
                    <p class="vip"><i>会员购</i></p>
                </a>
            </li>
            
            <li>
                <a href="#">
                    <img src="./images/wode.png" alt="">
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </footer>
    <!-- tabbar end -->


    <script>
        //初始化页面时调用
        initPage();
        function initPage() {
            //获取html元素
            var html = document.documentElement;
            //获取屏幕可视区宽度
            var clientWidth = html.clientWidth;
            //动态设置html的font-size大小 
            html.style.fontSize = clientWidth / 10 + 'px';
        }
        //当窗口发生改变时调用
        window.onresize = initPage;
    </script>
    <!-- 选项卡切换 -->
    <script>
        var tab = document.querySelectorAll(".m-recommend-tab li");
        var tabList = document.querySelectorAll(".m-recommend-content .m-recommend-list");
        var len = tab.length;
        for(var i=0;i<len;i++){
            tab[i].index=i;
            tab[i].onclick = function(){
                for(var j=0;j<len;j++){
                    tab[j].classList.remove("active");
                    tabList[j].style.display="none";
                }
                this.classList.add("active");
                tabList[this.index].style.display="block";

                // 重新初始化
                new Swiper ('#swiper-recommend'+(this.index+1), {
                    slidesPerView : 2,
                    spaceBetween : 19,
                });
            }
        }
    </script>
    <script src="./js/swiper-bundle.min.js"></script>
    <script>        
        var mySwiper1 = new Swiper('#swiper-nav', {
            slidesPerView : 6.5, 
        });  
    </script>
    <script>        
        var mySwiper2 = new Swiper ('#swiper-banner', {
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
        });
           
        var mySwiper3 = new Swiper ('#swiper-recommend1', {
            slidesPerView : 2,
            spaceBetween : 19,
        });
        
        var mySwiper4 = new Swiper ('#swiper-foucus', {
            slidesPerView : "auto",
            spaceBetween : 12,
        });

        // var mySwiper3 = new Swiper ('#swiper-recommend3', {
        //     slidesPerView : 2,
        //     spaceBetween : 19,
        // });
    </script>
</body>
</html>